<template>
	<view class="w-100">
		<template v-if="!loadingState">
			<view class="flex-1 row" style="height: 500px;">
				<image :src="loadingImg" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view class="head-box pb-4 flex-1 border-bottom">
				<view class="flex-1 mx-4 d-f pt-3">
					<view class="row-ac flex-1">
						<view class="head-img row">
							<image :src="userInfo.head_image" mode="" v-if="loginStatus"></image>
							<view class="iconfont icon-yonghu" v-else></view>
						</view>
						<view class="ml-3" v-if="loginStatus">
							<view class="font-s-5 font-w">{{ userInfo.nickname || userInfo.username }}</view>
							<view class="mt-1 font-s-3 text-muted" @click="paste(userInfo.mark_id)">邀请码:
								{{ userInfo.mark_id }}
							</view>
							<view class="mt-1 row-ac font-s-3 text-muted">
								<view>身份: {{ useridentity.identity_name }}</view>
								<!-- <view class="ml-2">上级: {{ distributors.leader_name }}</view> -->
							</view>
						</view>
						<view class="font-s-5 font-w ml-3" v-if="!loginStatus" @tap="navToLogin('/pages/public/login')">
							登录 / 注册
						</view>
					</view>
					<view class="iconfont icon-shezhi" v-if="loginStatus" @click="showDrawer('showLeft')"></view>
				</view>
				<view class="flex-1 mx-4 mt-4 border p-3">
					<view class="row-ac" @click="navTo('/pages/user/operation/dividend-list')">
						<view class="flex-1"><text class="iconfont icon-tuiguangzhuanqian mr-1"></text>钱包余额<text
								class="ml-3 font-s-3 text-muted">今日收入{{ personalreport.today_agent_commission_amount + personalreport.today_region_branch_amount + personalreport.today_regional_dividend_amount | num2Filter }}</text>
						</view>
						<view class="iconfont icon-qianbao text-light-grey" style="font-size: 42rpx;"></view>
					</view>
					<view class="mt-1 font-s-7 font-w text-main-color"><text
							class="font-s-2 mr-1">¥</text>{{ dividendreport.total_dividend_amount +  dividendreport.total_bonus_amount | num2Filter  }}
					</view>
					<view class="mt-2">
						<view class="row-ac text-muted font-s-3 mt-1">分享佣金收入:<text
								class="ml-1 text-main-color font-w">{{ personalreport.agent_commission_amount | num2Filter }}</text>
						</view>
						<view class="row-ac text-muted font-s-3 mt-1">累计区域收入:<text
								class="ml-1 text-main-color font-w">{{ personalreport.region_branch_amount | num2Filter }}</text>
						</view>
						<view class="row-ac text-muted font-s-3 mt-1">累计分红收入:<text
								class="ml-1 text-main-color font-w">{{ personalreport.regional_dividend_amount | num2Filter }}</text>
						</view>
						<!-- 						<view class="row-ac text-muted font-s-3 mt-1" style="width: 50%;">分红余额:<text
								class="ml-1 text-main-color font-w">{{ dividendreport.total_dividend_amount | num2Filter }}</text>
						</view>
						<view class="row-ac text-muted font-s-3 mt-1" style="width: 50%;">区域奖金余额:<text
								class="ml-1 text-main-color font-w">{{ dividendreport.total_bonus_amount | num2Filter }}</text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="flex-1 py-5 row-ac mx-2" v-if="loginStatus">
				<view class="flex-1 row-a-j-fc tab-box" v-if="useridentity.identity == 1">
					<view class="font-s-4 font-w text-main-color">{{ personalreport.coupon_amount_total }}</view>
					<view class="mt-1 font-s-35">现金券</view>
				</view>
				<view class="flex-1 row-a-j-fc tab-box">
					<view class="font-s-4 font-w text-main-color">{{ personalreport.user_integral_total }}</view>
					<view class="mt-1 font-s-3">个人积分</view>
				</view>
				<view class="flex-1 row-a-j-fc tab-box">
					<view class="font-s-4 font-w text-main-color">{{ reportstatistics.submit_funds }}</view>
					<view class="mt-1 font-s-3">待上交款</view>
				</view>
				<view class="flex-1 row-a-j-fc tab-box" v-if="useridentity.identity !== 1"
					@click="navTo('/pages/datacenter/sales-report-list')">
					<view class="font-s-4 font-w text-main-color">{{ reportstatistics.submit_funds }}</view>
					<view class="mt-1 font-s-3">待收款</view>
				</view>
				<view class="flex-1 row-a-j-fc tab-box" v-if="useridentity.identity == 2">
					<view class="font-s-4 font-w text-main-color">{{ personalreport.agent_commission_amount }}</view>
					<view class="mt-1 font-s-3">分享佣金</view>
				</view>
				<view class="flex-1 row-a-j-fc tab-box"
					v-if="useridentity.identity !== 1 && useridentity.identity !== 2">
					<view class="font-s-4 font-w text-main-color">{{ personalreport.agent_commission_amount }}</view>
					<view class="mt-1 font-s-3">应付佣金</view>
				</view>
			</view>
			<view class="flex-1 mx-3 mt-1">
				<view class="flex-1 row-ac project-box border-bottom" @click="navTo('/pages/datacenter/index')">
					<view class="position-relative flex-1">
						<view class="font-s-4 ml-3">数据中心</view>
						<view class="prompt-box row" v-if="reportTotal > 0">{{ reportTotal }}</view>
					</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<view class="flex-1 row-ac project-box border-bottom"
					@click="navTo('/pages/user/operation/integral-standings')" v-if="useridentity.identity != 1">
					<view class="font-s-4 flex-1 ml-3">销售积分排行榜</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<view class="flex-1 row-ac project-box border-bottom" @click="navTo('/pages/user/examine-agent')"
					v-if="useridentity.identity == 5 || useridentity.identity == 6 || useridentity.identity == 7">
					<view class="position-relative flex-1">
						<view class="font-s-4 ml-3">代理审核</view>
						<view class="prompt-box row" v-if="examineTotal > 0">{{ examineTotal }}</view>
					</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<view class="flex-1 row-ac project-box border-bottom" v-if="useridentity.identity == 1"
					@click="navTo('/pages/user/becoming-agent')">
					<view class="font-s-4 flex-1 ml-3">成为代理</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<view class="flex-1 row-ac project-box border-bottom" @click="navTo('/pages/order/order-list')">
					<view class="font-s-4 flex-1 ml-3">我的报单</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<view class="flex-1 row-ac project-box border-bottom" @click="navTo('/pages/user/my-team')">
					<view class="font-s-4 flex-1 ml-3">我的团队</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<view class="flex-1 row-ac project-box border-bottom" @click="navTo('/pages/user/address')">
					<view class="font-s-4 flex-1 ml-3">地址管理</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<view class="flex-1 row-ac project-box border-bottom" @click="navTo('/pages/user/settings/userset')">
					<view class="font-s-4 flex-1 ml-3">个人设置</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<view class="flex-1 row-ac project-box border-bottom" @click="navTo('/pages/user/settings/usercard')">
					<view class="font-s-4 flex-1 ml-3">邀请码</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view>
				<!-- <view class="flex-1 row-ac project-box mb-3" v-if="useridentity.identity !== 1"
					@click="navTo('/pages/user/reward-rules')">
					<view class="font-s-4 flex-1 ml-3">伊兰朵制度</view>
					<view class="iconfont icon-next-01 mr-3"></view>
				</view> -->
			</view>
			<!-- 左弹出 -->
			<view class="flex-1">
				<uni-drawer ref="showLeft" mode="left" :width="200" @change="change($event,'showLeft')">
					<view class="flex-1">
						<view class="flex-1 left-icon" style="margin-left: 96rpx;">
							<view class="row-ac flex-1" style="margin-top: 130rpx;"
								@click="navTo('/pages/user/settings/usersecure')">
								<view class="iconfont icon-xinxitishicopy"></view>
								<view class="font-s-4 ml-2">账户与安全</view>
							</view>
							<view class="mt-6 row-ac flex-1" @click="navTo('/pages/user/my-collection')">
								<view class="iconfont icon-heart1"></view>
								<view class="font-s-4 ml-2">我的收藏</view>
							</view>
						</view>
						<view class="my-5 flex-1 mx-3 border-bottom"></view>
						<view class="flex-1 left-icon" style="margin-left: 96rpx;">
							<view class="mt-6 row-ac flex-1" @click="navTo('/pages/user/settings/setting')">
								<view class="iconfont icon-jianchagengxin"></view>
								<view class="font-s-4 ml-2">通用设置</view>
							</view>
							<view class="mt-6 row-ac flex-1" @click="navTo('/pages/user/help/about-me')">
								<view class="iconfont icon-xinxitishicopy"></view>
								<view class="font-s-4 ml-2">关于我们</view>
							</view>
						</view>
						<view class="flex-1 row" style="margin-top: 130rpx;">
							<view class="logout-box row font-s-4" @click="logout">切换用户</view>
						</view>
						<view class="flex-1 mt-5 row">
							<view class="logout-box row font-s-4" @click="logout">退出登录</view>
						</view>
					</view>
				</uni-drawer>
			</view>
		</template>
		<view v-if="showPopup" class="popup-overlay" @touchmove.stop.prevent @click.self="closePopup">
			<view class="popup-content py-3" @click.stop.prevent="">
				<view class="flex-1 font-s-35 row py-2">绑定微信头像昵称</view>
				<view class="row-a-j-fc mb-4">
					<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="form.head_image"></image>
					</button>
					<view class="font-s-1 mt-1 text-main-color">点击选择微信头像</view>
				</view>
				<view class="flex-1 mx-3 my-3 row-ac">
					<view class="font-s-3 mr-3">昵称</view>
					<input type="nickname" class="weui-input flex-1 p-1 font-s-3" placeholder="点击选择微信昵称"
						@change="getNickname" placeholder-class="my-input-placeholder" />
				</view>
				<view class="description flex-1 mx-3">
					99%+的用户使用选择微信头像和微信昵称，便于订单发货和售后沟通
				</view>
				<view class="login-button-wrapper mb-3">
					<button @click="wechatBinding" class="login-button font-s-35">立即绑定</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		userInfoUrl,
		usersbalanceUrl,
		useridentityDetailUrl,
		distributorsDetailUrl,
		useridentityexamineListUrl,
		revenuereportListUrl,
		userPatchUrl,
		imagesUploadUrl,
		personalreportUrl,
		revenuereportstatisticsUrl,
		regionaldividendreportUrl
	} from '@/api/index.js';
	import request from '@/utils/request'
	export default {
		data() {
			return {
				loadingState: false,
				loadingImg: '../../static/img/loading.gif',
				loginStatus: false,
				userInfo: '',
				showLeft: false,
				useridentity: '',
				distributors: '',
				examineueryInfo: {
					addly_status: 2
				},
				reportQeueryInfo: {
					receive_status: 2
				},
				examineTotal: 0,
				reportTotal: 0,
				workreportStatus: false,
				showPopup: false,
				form: {
					head_image: 'https://elianto.vip1198.cn/files/common/avatar.png',
					nickname: '',
					binding_status: true
				},
				personalreport: {
					coupon_amount_total: 0,
					user_integral_total: 0,
					today_agent_commission_amount: 0,
					today_region_branch_amount: 0,
					today_regional_dividend_amount: 0
				},
				reportstatistics: {
					submit_funds: 0,
					receiving_funds: 0
				},
				dividendreport: {
					total_dividend_amount: 0,
					dividend_amount_add: 0,
					dividend_amount_minus: 0,
					dividend_amount_extract: 0,
					total_bonus_amount: 0,
					bonus_amount_add: 0,
					bonus_amount_minus: 0,
					bonus_amount_extract: 0
				}
			}
		},
		filters: {
			num2Filter(value) {
				let realVal = parseFloat(value).toFixed(2);
				return realVal;
			}
		},
		onLoad() {
			this.initData()
			this.token = uni.getStorageSync('token')
			setTimeout(() => {
				this.loadingState = true;
			}, 1000);
		},
		onShow() {
			this.initData();
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		methods: {
			initData() {
				this.token = uni.getStorageSync('token')
				if (this.token != '') {
					this.loginStatus = true
					this.getUserInfo()
					this.getUseridentityDetail()
					this.getDistributorsDetail()
					this.getUseridentityexamineList()
					this.getRevenuereportList()
					this.getPersonalreport()
					this.getRevenuereportstatistics()
					this.getRegionaldividendreport()

				} else {
					this.loginStatus = false
				}

			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
					this.userId = this.userInfo.id
					if (this.userInfo.duties !== null) {
						this.workreportStatus = true
					}
					if (this.userInfo.binding_status !== true) {
						setTimeout(() => {
							this.showPopup = true
						}, 1000);
					} else {
						this.showPopup = false
					}
				})
			},
			getUseridentityDetail() {
				this.$R.get(useridentityDetailUrl).then(res => {
					this.useridentity = res.data
				})
			},
			getRevenuereportList() {
				this.$R.get(revenuereportListUrl, this.reportQeueryInfo).then(res => {
					this.reportList = res.data.list
					this.reportTotal = res.data.total
				})
			},
			getRegionaldividendreport() {
				this.$R.get(regionaldividendreportUrl).then(res => {
					if (res.code == 200) {
						this.dividendreport = res.data
						console.log('99999', this.dividendreport);
					}
				})
			},
			getDistributorsDetail() {
				this.$R.get(distributorsDetailUrl).then(res => {
					this.distributors = res.data
				})
			},
			getPersonalreport() {
				this.$R.get(personalreportUrl).then(res => {
					this.personalreport = res.data
					console.log('888888', this.personalreport);
				})
			},
			getRevenuereportstatistics() {
				this.$R.get(revenuereportstatisticsUrl).then(res => {
					this.reportstatistics = res.data
				})
			},
			getUseridentityexamineList() {
				this.$R.get(useridentityexamineListUrl, this.examineueryInfo).then(res => {
					this.examineTotal = res.data.total
					//console.log(this.examineTotal);
				})
			},
			logout() {
				uni.showModal({
					content: '是否要退出登陆',
					success: res => {
						if (res.confirm) {
							// 从缓存中移除用户信息
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('distributionUserCenterInfo');
							uni.removeStorageSync('distributionUserInfo');
							uni.removeStorageSync('defaultAddress');
							uni.removeStorageSync('weChatOpenId');
							uni.removeStorageSync('userMarkId');
							uni.removeStorageSync('notice_mark');
							this.$store.commit('setUserToken', '')
							uni.navigateBack({
								delta: 1
							});
							uni.showToast({
								title: '退出登陆成功'
							});
							this.initData();
							this.closeDrawer('showLeft');
						}
					}
				});
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			},
			navToLogin(url) {
				uni.navigateTo({
					url: url
				});
			},
			paste(value) {
				uni.setClipboardData({
					data: value
				});
			},

			closePopup() {
				if (this.showPopup) {
					this.showPopup = false
				}
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				uni.uploadFile({
					url: request.baseUrl + imagesUploadUrl,
					filePath: avatarUrl,
					name: 'file',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token')
					},
					success: (uploadRes) => {
						const data = JSON.parse(uploadRes.data);
						if (data.code === 200) {
							const url = data.data.url;
							this.form.head_image = url
							console.log('0000', this.form.head_image);
						} else {
							console.error('上传失败');
						}
					},
					fail: (error) => {
						console.error('上传失败', error);
					}
				});
			},
			getNickname(e) {
				this.form.nickname = e.detail.value
			},
			wechatBinding() {
				if (this.form.nickname == '') {
					uni.showToast({
						title: '请点击绑定微信名称',
						icon: 'none'
					});
				} else {
					this.$R.patch(userPatchUrl + this.userId + '/', this.form).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '绑定成功'
							});
							uni.navigateBack({
								delta: 1
							});
						}
						this.getUserInfo()
					});
					this.closePopup();
				}
			},
			navTo(url) {
				if (this.loginStatus == false) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.head-box {
		.head-img {
			width: 158rpx;
			height: 158rpx;
			border-radius: 50%;
			border: 3rpx solid #939393;
			background-color: #D7D7D7;

			image {
				width: 158rpx;
				height: 158rpx;
				border-radius: 50%;
			}

			.icon-yonghu {
				font-size: 96rpx;
				color: #fff;
			}
		}

		.icon-shezhi {
			font-size: 48rpx;
			color: #333;
		}
	}

	.project-box {
		height: 96rpx;

		.iconfont {
			color: #757575;
		}
	}

	.tab-box {
		.iconfont {
			font-size: 50rpx;
		}
	}

	.prompt-box {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: red;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		left: 150rpx;
		top: -15rpx;
	}

	.prompt-sale-box {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: red;
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		left: 36rpx;
		top: -15rpx;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		background: #fff;
		border-radius: 10px;
		width: 630rpx;
	}

	.avatar-button {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border: none;
		padding: 0;
		margin: 0;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		object-fit: cover;
	}

	.weui-input {
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.my-input-placeholder {
		color: red;
	}

	.description {
		font-size: 12px;
		color: #666;
		margin-bottom: 20px;
		background-color: #f4f4f4;
		padding: 20rpx 25rpx;
	}

	.login-button-wrapper {
		display: flex;
		justify-content: center;
	}

	.login-button {
		padding: 5rpx 35rpx;
		background-color: #000;
		color: white;
		border: none;
		border-radius: 5px;
	}
</style>